﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="fhdb" content="true">
    <title>百瑞花苑-找回密码</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css\style-1.css">
    <link rel="stylesheet" href="css\bootstrapValidator.css">
    <script type="text/javascript" src="jquery\jquery-1.10.2.min.js"></script>
    <script src="jquery\jquery.form.min.js"></script>
    <script type="text/javascript" src="jquery\bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery\bootstrapValidator.js"></script>
</head>
<body>
    <div class="phoneError"></div>
    <form id="defaultForm">
        <div class="backBox" onclick="javascript:history.back(-1);">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </div>
        <div class="topTitle">忘记密码</div>
        <div class="bigBox">
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-phone"></span><input type="text" id="userphone" name="phone" placeholder="请输入您的手机号">
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-envelope"></span><input class="code" type="text" name="verificationCode" placeholder="请输入验证码">
                <button type="button" class="getCode" id="code" style=" background-color: transparent; border: 0px solid transparent; float:right;">获取验证码</button>
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-lock"></span><input type="password" name="password" placeholder="设置新密码">
            </div>
            <div class="passBox form-group">
                <span class="glyphicon glyphicon-lock"></span><input type="password" name="repassword" placeholder="确认新密码">
            </div>
            <div class="form-group">
                <button type="submit" class="btn btnBox" id="btnBox">提交</button>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#defaultForm').bootstrapValidator({
                fields: {
                    phone: {
                        validators: {
                            notEmpty: {
                                message: '手机号码不能为空'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|7|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }
                        }
                    },
                    verificationCode: {
                        validators: {
                            notEmpty: {
                                message: '验证码不能为空'
                            }
                        }
                    }, password: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 8,
                                max: 16,
                                message: '长度必须在8到16之间'
                            },
                            regexp: {
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成'
                            }
                        }
                    },
                    repassword: {
                        validators: {
                            notEmpty: {
                                message: '密码不能为空'
                            },
                            stringLength: {
                                min: 8,
                                max: 16,
                                message: '长度必须在8到16之间'
                            },
                            identical: {//相同
                                field: 'password',
                                message: '两次密码不一致'
                            },
                            regexp: {//匹配规则
                                regexp: /^[a-zA-Z0-9_\.]+$/,
                                message: '用户名只能由字母、数字、点和下划线组成'
                            }
                        }
                    }
                }
            });
        });
        $('#code').click(function () {
            if ($("#userphone").val() == "") {
                $('.phoneError').text("请输入手机号");
                var top = ($(window).height() - $('.phoneError').height()) / 2;
                var left = ($(window).width() - $('.phoneError').width()) / 2;
                var scrollTop = $(document).scrollTop();
                var scrollLeft = $(document).scrollLeft();
                $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                setTimeout(function () {
                    $('.phoneError').hide();
                }, 2000)
                return;
            }
            $.ajax({
                type: "POST",
                data: { userphone: $("#userphone").val() },
                url: "../../BaseRefWeb.aspx?stype=ISpMemberFun&method=DoSms&type=sp",
                success: function (result) {
                    countDown();
                }
            });
        });
        var cookie = document.cookie;
        var num;
        var interval;
        $(function () {
            if (cookie != "" && cookie.indexOf("countTime") >= 0) {
                num = parseInt(cookie.substring(cookie.indexOf("=") + 1));
                $("#code").text(num + '秒');
                countDown();
            } else {
                num = 60;
            }
        })
        function countDown() {
            var d = new Date();
            d.setTime(d.getTime() + (60 * 1000));
            if (num == 0) {
                num = 60;
            }
            $("#code").attr("disabled", true);
            interval = setInterval(function () {
                num = num - 1
                document.cookie = "countTime" + "=" + num + ";" + "expires=" + d.toUTCString() + ";path=/";
                if (num > 0) {
                    $("#code").text(num + '秒');
                } else {
                    $("#code").text("获取验证码");
                    $("#code").attr("disabled", false);
                    document.cookie = "countTime" + "=" + num + ";" + "expires=" + new Date().toUTCString() + ";path=/";
                    clearInterval(interval);
                }
            }, 1000);
        }
        //提交表单数据
        $('#btnBox').click(function (event) {
            $('#defaultForm').data('bootstrapValidator').validate(); //启用验证
            var flag = $('#defaultForm').data('bootstrapValidator').isValid()//验证是否通过true/false
            if (flag) {
                $("#defaultForm").ajaxSubmit({
                    type: "post",
                    url: "../../BaseRefWeb.aspx?stype=ISpMemberFun&method=DoForgotPass&type=sp",
                    dataType: "json",
                    success: function (result) {
                        if (result.success == false) {
                            $('.phoneError').text(result.msg);
                            var top = ($(window).height() - $('.phoneError').height()) / 2;
                            var left = ($(window).width() - $('.phoneError').width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                            setTimeout(function () {
                                $('.phoneError').hide();
                            }, 2000)
                        }
                        else {
                            $('.phoneError').text(result.msg);
                            var top = ($(window).height() - $('.phoneError').height()) / 2;
                            var left = ($(window).width() - $('.phoneError').width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $('.phoneError').css({ position: 'absolute', 'top': top + scrollTop, left: left + scrollLeft }).show();
                            setTimeout(function () {
                                $('.phoneError').hide();
                                window.location.href = "Login.html";
                            }, 2000)
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>